<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" width="500px">
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>SEX</th>
                <th>SCORE</th>
                <th>等级</th>
            </tr>
            <tr v-for="(item,index) in users" :key="item.id" :class="item.score >=90 ? 'active':''">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.sex }}</td>
                <td>{{ item.score }}</td>
                <td v-if="item.score >90"> 优秀</td>
                <td v-else-if="item.score >=80 && item.score < 90">良好</td>
                <td v-else-if="item.score >=60 && item.score <80">良好</td>
                <td v-else>不及格</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                users:[
                    {id:1,name:"云鹏",sex:"男",score:98},
                    {id:2,name:"亮子",sex:"男",score:88},
                    {id:3,name:"海鑫",sex:"男",score:50},
                    {id:4,name:"显峰",sex:"男",score:90},
                    {id:5,name:"建东",sex:"男",score:70},
                    {id:6,name:"彬子",sex:"男",score:55},
                ]
            }
        })
    </script>
</body>
</html>